underscore template js

发表于 | 分类于

一 underscore_template.js模板引擎的使用

1 语法

1
2
3
4
5
6
7
8
9
10
<script type="text/template">
	_.template模板函数只能解析3种模板标签（这比Smarty、JSTL要简单得多）：
<%  %>：用于包含JavaScript代码，这些代码将在渲染数据时被执行。
<%= %>：用于输出数据，可以是一个变量、某个对象的属性、或函数调用（将输出函数的返回值）。
<%- %>：用于输出数据，同时会将数据中包含的HTML字符转换为实体形式（例如它会将双引号转换为&quot;形式），用于避免XSS攻击。
</script>

2-0 template模板函数基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_.template(templateString, [settings]) 
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.
var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"
var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"
您也可以在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.
var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

2 -1模板解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 用于显示渲染后的标签 -->  
<ul id="element"></ul>  
 
<!-- 定义模板，将模板内容放到一个script标签中 -->  
<script type="text/template" id="tpl"> 
//注意type类型  "text/template"
    <% for(var i = 0; i < list.length; i++) { %>  
        <% var item = list[i] %>  
        <li>  
            <span><%=item.firstName%> <%=item.lastName%></span>  
            <span><%-item.city%></span>  
        </li>  
    <% } %>  
</script>  
<script type="text/javascript" src="underscore/underscore-min.js"></script>  
<script type="text/javascript">  
    // 获取渲染元素和模板内容  
    var element = $('#element'),  
        tpl = $('#tpl').html();  
 
    // 创建数据, 这些数据可能是你从服务器获取的  
    var data = {  
        list: [  
            {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},  
            {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},  
            {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},  
            {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}  
        ]  
    }  
 
    // 解析模板, 返回解析后的内容  
    var html = _.template(tpl, data); 
//注意data 必须是javascript对象                                      
    // 将解析后的内容填充到渲染元素  
    element.html(html);  
</script>

在本例中，我们将模板内容放到一个